<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="re">
					<!--轮播图-->
					<swiper class="swiper_focus" :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration" :indicator-color="indicatorColor"
						:indicator-active-color="indicatorActiveColor" :circular="circular" @change="onswiperChange">
						<swiper-item v-for="(item ,index) in detail.imgList" :key="index">
							<image :lazy-load="true" :src="item" mode="widthFix"></image>
						</swiper-item>
					</swiper>
					<!--轮播图-->
					<view class="swiper_serial_number">{{index}}/{{detail.imgList.length}}</view>
					<!-- 返回-按钮 -->
					<view class="back_btn_pos">
						<image :lazy-load="true" src="/static/icon_arrow_3.png" @tap="back" class="img9"></image>
					</view>
				</view>
				<view class="pt20 pb20 pl15 pr15">
					<view class="area_block_1">
						<view class=" pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">故障名称</view>
								<view class="item tar">
									<view class="sel_area_sty">{{detail.title}}</view>
								</view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="vh ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class=" w185 fs30 cor_000">设备型号</view>
								<view class="item tar">
									<view class="sel_area_sty">{{detail.digger}}</view>
								</view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="vh ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr25">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">联系电话</view>
								<view class="item tar">
									<view class="sel_area_sty">{{detail.phone}}</view>
								</view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15 vh"></image>
							</view>
						</view>

						<view class="pl20 pr25">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">所在地点</view>
								<view class=" item tar">
									<view class="sel_area_sty">{{detail.place}}</view>
								</view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15 vh"></image>
							</view>
						</view>

					</view>

					<view class="mt20 pt35 pl20 pr20 pb30 area_block_1">
						<view class="fs30 cor_000">故障描述</view>
						<view class="mt20 textarea_area_line">
							<view class="textarea_01">{{detail.introduce}}</view>
						</view>
					</view>

				</view>
			</view>
			<!-- 接单-按钮 -->
			<view v-if="detail.state == 1" class="consult_immediately_btn" @tap="acceptOrder">接单</view>
			<view v-if="detail.state == 2" class="consult_immediately_btn" @tap="finishOrder">已完成维修</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getRepairDetailApi,
		repairTakeOrderApi,
		repairFinishOrderApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				autoplay: true,
				interval: 3000,
				duration: 300,
				indicatorDots: false,
				circular: true,
				indicatorColor: '#fff',
				indicatorActiveColor: '#0692ff',
				autoplayNews: true,
				intervalNews: 3000,
				durationNews: 300,
				index: "1", //轮播当前序号,
				id: 0,
				detail: {
					id: "",
					title: "",
					digger: "",
					type: "",
					phone: "",
					introduce: "",
					place: "",
					state: 1,
					imgList: []
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
			}
			this.getRepairDetail();
		},
		onBackPress(options) {
		    uni.switchTab({
		    	url: '/pages/personal_center/personal_center'
		    })
		},
		methods: {
			onswiperChange: function(e) {
				this.index = e.detail.current + 1
			},

			getRepairDetail() {
				let that = this;
				showLoading('加载中..');
				getRepairDetailApi({
					id: this.id
				}).then(res => {
					that.detail = res.data;
					console.log(that.detail);
					hideLoading();
				}).catch(err => {
					toast(err.msg);
					hideLoading();
				})
			},

			acceptOrder() {
				if (this.detail.state != 1) {
					toast('当前状态不支持此操作');
					return false;
				}
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要接此单吗',
					success: function(res) {
						if (res.confirm) {
							console.log('点击确定接单')
							repairTakeOrderApi({
								id: that.id,
								workId: uni.getStorageSync('userId')
							}).then(res => {
								toast('接单成功！')
								setTimeout(function() {
									uni.redirectTo({
										url: '/pages/maintenance_record/maintenance_record'
									})
								}, 1500)
							}).catch(err => {
								console.log(err)
								toast(err.msg);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			finishOrder() {
				if (this.detail.state != 2) {
					toast('当前状态不支持此操作');
					return false;
				}
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定已完成此单吗',
					success: function(res) {
						if (res.confirm) {
							repairFinishOrderApi({
								id: that.id,
								userId: uni.getStorageSync('userId')
							}).then(res => {
								
								toast('操作成功！')
								setTimeout(function() {
									uni.redirectTo({
										url: '/pages/maintenance_record/maintenance_record'
									})
								}, 1500)
							}).catch(err => {
								console.log(err)
								toast(err.msg);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 163rpx);
		background-color: #f6f6f6;
		margin-top: 65rpx;
	}

	.swiper_focus {
		width: 100%;
		height: 690rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.swiper_focus image {
		height: 100%;
		width: 100%;
	}

	.swiper_serial_number {
		position: absolute;
		bottom: 23rpx;
		right: 30rpx;
		width: 90rpx;
		height: 46rpx;
		line-height: 46rpx;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		background: rgba(0, 0, 0, .23);
		border-radius: 23rpx;
		z-index: 2;
	}

	.back_btn_pos {
		position: absolute;
		top: 41rpx;
		left: 29rpx;
		width: 64rpx;
		height: 64rpx;
		z-index: 3;
	}

	.area_block_1 {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.sel_area_sty {
		display: inline-block;
		width: 100%;
		height: 94rpx;
		line-height: 94rpx;
		text-align: right;
		font-size: 28rpx;
		color: #0A0A0A;
		background: transparent;
	}

	.textarea_area_line {
		padding: 20rpx;
		border: 1px solid #e7e5e5;
	}

	.textarea_area_line .textarea_01 {
		display: inline-block;
		width: 100%;
		padding: 0rpx;
		min-height: 245rpx;
		line-height: 40rpx;
		text-align: left;
		padding: 0;
		font-size: 28rpx;
		color: #0A0A0A;
		background-color: transparent;
		border: none;
		border-radius: 0;
		outline: none;
	}
</style>
